﻿<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { BasicTableColumn } from '@/types'
import {
  User,
} from '@/types/modules/user'
import { formatToDateTime } from '@/utils/dateUtil'
import { BasicModal as BModal } from '@/components/Modal'
import { useI18n } from '@/hooks/web/useI18n'
import { useHttp } from '@/hooks/web/useHttp'
import { useTableList } from '@/hooks/system/useTableList'
import * as api from '@/api/modules/user'
import { useModal } from '@/hooks/system/useModal'
import list from './components/list.vue'
import detail from './detail.vue'

const { t } = useI18n()

const searchParams = reactive({})

let basicData: BasicTableColumn<User>[] = [
  {
    title: '帐号',
    dataIndex: 'account'
  },
  {
    title: '姓名',
    dataIndex: 'name'
  },
]

const { columns, pageParams, tableData, total, getData } =
  useTableList<User>(basicData)

onMounted(() => {
  getDataList()
})

const getDataList = getData(api.getUserList, searchParams)

const {
  bindValue: detailBindValue,
  register: detailRegister,
  currentItem: detailCurrentItem,
  onShow: onShowDetail,
  onClose: onCloseDetail
} = useModal<User>()
</script>

<template>
  <div class="page-wrapper">
    <a-card class="table-card">
      <list v-bind="{ pageParams, total, columns, tableData }" title="用户" @refresh="getDataList">
        <template #operate="row">
          <a type="link" @click="onShowDetail(row)">{{ t('system.detail') }}</a>
        </template>
      </list>
    </a-card>

    <b-modal v-bind="detailBindValue" :footer="null" :title="t('system.modal.detail')" @register="detailRegister"
      @cancel="onCloseDetail">
      <detail :item-data="detailCurrentItem" />
    </b-modal>
  </div>
</template>

<style lang="less" scoped>
.page-wrapper {
  padding: 20px;

  .table-card {
    margin-top: 20px;
  }
}

.drawer-footer {
  text-align: right;

  button {
    margin-left: 8px;
  }
}
</style>
